<template>
  <div class="LoginContainer">
    <!-- <div class="imgContainer">
      <img src="../../public/Register/img/background.png" alt="" />
    </div> -->
    <div class="background">
      <div class="overlay"></div>
      <div class="typeit">
        <h1 id="typeit"></h1>
      </div>
    </div>
    <el-dialog
      title="请问您的身份是："
      center
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <div class="radioContainer">
        <div :class="{identityRadio, 'hover': teacherhover, 'click': teacherClick}" v-if="!teacherClick" @click="studentClick = false; teacherClick = true; identity = 'teacher'; studenthover = false" @mouseenter ="teacherhover = true" @mouseleave="teacherhover = false">
          <img src="../../public/Register/img/teacher.png" alt="">
          <span>教师</span>
        </div>
        <div :class="{identityRadio, 'hover': teacherhover, 'click': teacherClick}" v-if="teacherClick">
          <img src="../../public/Register/img/teacherblue.png" alt="">
          <span>教师</span>
        </div>
        <div :class="{identityRadio, 'hover': studenthover, 'click': studentClick}" v-if="!studentClick" @click="studentClick = true; teacherClick = false; identity = 'student'; teacherhover = false" @mouseenter ="studenthover = true" @mouseleave="studenthover = false">
          <img src="../../public/Register/img/student.png" alt="">
          <span>学生</span>
        </div>
        <div :class="{identityRadio, 'hover': studenthover, 'click': studentClick}" v-if="studentClick">
          <img src="../../public/Register/img/studentblue.png" alt="">
          <span>学生</span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="identityNext">下一步</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="请填写您的信息："
      center
      :visible.sync="dialogStudentVisible"
      width="30%"
      :before-close="handleClose">
      <div class="radioContainer">
        <el-form
          status-icon
          label-width="0px"
          :rules="rules"
          class="demo-ruleForm"
        >
        <el-form-item prop = "studentNumber">
            <el-input
                v-model="studentNumber"
                class="input"
                placeholder="请输入您的学号"
            >
                <i slot="prefix" class="el-input__icon el-icon-user"></i>
            </el-input>
        </el-form-item>
        <el-form-item prop = "name">
            <el-input
                v-model="name"
                class="input"
                placeholder="请输入您的姓名"
            >
                <i slot="prefix" class="el-input__icon el-icon-s-custom"></i>
            </el-input>
        </el-form-item>
        <el-form-item prop="studentInfo" >
            <el-cascader
              v-model="studentValue"
              :options="studentInfoData"
              placeholder="请选择学院/年级/班级"
              @change="handleChange"></el-cascader>
        </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogStudentVisible = false; dialogVisible=true">上一步</el-button>
        <el-button type="primary" @click="dialogStudentVisible = false;dialogAccountVisible=true">下一步</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="请填写您的信息："
      center
      :visible.sync="dialogTeacherVisible"
      width="30%"
      :before-close="handleClose">
      <div class="radioContainer">
        <el-form
          status-icon
          label-width="0px"
          :rules="rules"
          class="demo-ruleForm"
        >
        <el-form-item prop = "teacherNumber">
            <el-input
                v-model="teacherNumber"
                class="input"
                placeholder="请输入您的工号"
            >
                <i slot="prefix" class="el-input__icon el-icon-user"></i>
            </el-input>
        </el-form-item>
        <el-form-item prop = "name">
            <el-input
                v-model="name"
                class="input"
                placeholder="请输入您的姓名"
            >
                <i slot="prefix" class="el-input__icon el-icon-s-custom"></i>
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-select v-model="teacherValue" placeholder="请选择您所在的学院">
              <el-option
                v-for="item in teacherInfoData"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </el-form-item>
        </el-form>
      </div>
      
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTeacherVisible = false; dialogVisible = true">上一步</el-button>
        <el-button type="primary" @click="dialogTeacherVisible = false;dialogAccountVisible=true">下一步</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="请输入您的用户名和密码："
      center
      :show-close = "false"
      :close-on-click-modal="false"
      :visible.sync="dialogAccountVisible"
      width="30%"
      :before-close="handleClose">
      <el-form
        status-icon
          ref="ruleFormRef"
          label-width="0px"
          :model="ruleForm"
          :rules="rules"
          class="demo-ruleForm"
      >
        <el-form-item prop="account">
            <el-input
              v-model="ruleForm.username"
              class="input"
              placeholder="请输入用戶名"
            >
              <i slot="prefix" class="el-input__icon el-icon-user"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="pass">
            <el-input
              v-model="ruleForm.password"
              class="input"
              type="password"
              placeholder="请输入密码"
            >
              <i slot="prefix" class="el-input__icon el-icon-lock"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="confrimPass">
            <el-input
              v-model="ruleForm.confrimPassword"
              class="input"
              type="password"
              placeholder="请再次输入密码"
            >
              <i slot="prefix" class="el-input__icon el-icon-lock"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm('ruleFormRef')"
              class="loginBtn"
              >注册</el-button
            >
          </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template> 

<script>
import TypeIt from "typeit";

export default {
  data() {
    var checkAccount = (rule, value, callback) => {
      // console.log(value);
      if (!this.ruleForm.username) {
        return callback(new Error("账号不能为空"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      console.log("非空检验");
      console.log(value);
      if (!this.ruleForm.password) {
        return callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (!this.ruleForm.confrimPassword) {
        console.log(value);
        callback(new Error("请再次输入密码"));
      } else if (this.ruleForm.confrimPassword !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validatePass3 = (rule, value, callback) => {
      if (!this.teacherNumber) {
        callback(new Error("请输入工号"));
      } else {
        callback();
      }
    };
    var validatePass4 = (rule, value, callback) => {
      if (!this.studentNumber) {
        callback(new Error("请输入学号"));
      } else {
        callback();
      }
    };
    var validatePass5 = (rule, value, callback) => {
      if (!this.name) {
        callback(new Error("请输入姓名"));
      } else {
        callback();
      }
    };
    return {
      // 输入的用户名，密码
      ruleForm: {
        username: "",
        password: "",
        confrimPassword: "",
      },
      // 学号、工号
      studentNumber: "",
      teacherNumber: "",
      // 老师或学生真实姓名
      name: "",
      // 用来控制对话框的Boolean
      dialogVisible: false,
      dialogStudentVisible: false,
      dialogTeacherVisible: false,
      dislogAccountVisible: false,
      dialogAccountVisible: false,
      // 学生选择信息框存储
      studentValue: "",
      teacherValue: "",
      // 存储教师或者学生的需要的数据
      studentInfoData: [],
      teacherInfoData: [],
      // 用来判断单选框状态的
      teacherhover: false,
      studenthover: false,
      teacherClick: false,
      studentClick: false,
      identityRadio: true,
      // 表明用户身份的
      identity: "teacher",
      // 需要遵守的规则
      rules: {
        confrimPass: [{ validator: validatePass2, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        account: [{ validator: checkAccount, trigger: "blur" }],
        teacherNumber: [{ validator: validatePass3, trigger: "blur" }],
        studentNumber: [{ validator: validatePass4, trigger: "blur" }],
        name: [{ validator: validatePass5, trigger: "blur" }],
      },
    };
  },
  methods: {
    // 这个是改变下拉框选项
    handleChange() {},
    identityNext() {
      this.dialogVisible = false;
      if (this.identity == "teacher") {
        this.dialogTeacherVisible = true;
      } else if (this.identity == "student") {
        this.dialogStudentVisible = true;
      }
    },
    submitForm(formName) {
      console.log(formName);
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // alert('submit!');
          let infoData = {};
          let cryptograph;
          cryptograph = this.Rsa.noTokenRsa(this.ruleForm.password);
          infoData.cryptograph = cryptograph;
          infoData.username = this.ruleForm.username;
          infoData.name = this.name;
          console.log(cryptograph);
          infoData.identity = this.identity;
          if (this.identity == "teacher") {
            infoData.institute_id = this.teacherValue;
            infoData.teacherNumber = this.teacherNumber;
          } else if (this.identity == "student") {
            console.log(this.studentValue);
            infoData.studentNumber = this.studentNumber;
            infoData.institute_id = this.studentValue[0];
            infoData.grade_id = this.studentValue[0];
            infoData.class_id = this.studentValue[0];
          }
          console.log(infoData);
          let result = await this.$axios.post("/register/submit", infoData);

          console.log(result);
          if(result.code == 200) {
            this.$router.push("/login");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleClose() {
      this.dialogInfoVisible = true;
    },
  },
  async mounted() {
    var that = this;
    // 在最新版本中callback已经被弃用了
    new TypeIt("#typeit", {
      speed: 100,
      // waitUntilVisible: true,
      afterComplete: async (instance) => {
        console.log("dwohsaiohd");
        setTimeout(() => {
          that.dialogVisible = true;
        }, 500);
      },
    })
      .type("您好，欢迎注册冰糖教育!")
      .pause(1000)
      .delete(12)
      .type("在此之前，请允许我们获取一些您的信息")
      .go();

    let res = await this.$axios.get("/register/getStudentInfo");
    console.log(res);
    let res1 = await this.$axios.get("/register/getTeacherInfo");
    console.log(res1);
    this.studentInfoData = res.infoData;
    this.teacherInfoData = res1.infoData;
  },
};
</script>


<style>
* {
  padding: 0;
  margin: 0;
}
.background {
  position: relative;
  /* z-index: -1; */
  width: 100%;
  height: 100vh;
  background: url("../../public/Register/img/background.png");
  background-size: 800px 600px;
  background-repeat: no-repeat;
  background-position: center;
}
.identityRadio {
  display: flex;
  align-items: center;
  border: 1px #909399 solid;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
}
.identityRadio img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.hover {
  border: 1px #409eff solid;
}

.click {
  border: 1px #409eff solid;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5); /* 设置蒙版颜色和透明度 */
}
#typeit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  color: white;
}
.imgContainer img {
  width: 584px;
  height: 408px;
}
.LoginContainer {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 100vh;
}
.formContainer {
  width: 510px;
  /* height: 400px; */
  padding: 20px 0px;
  opacity: 1;
  border-radius: 18px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 12px 45px 0px rgba(0, 0, 0, 0.15),
    0px 0px 40.38px 0px rgba(255, 255, 255, 1),
    0px 0px 80.77px 0px rgba(255, 255, 255, 1),
    0px 0px 282.68px 0px rgba(255, 255, 255, 1),
    0px 0px 565.37px 0px rgba(255, 255, 255, 1),
    0px 0px 969.2px 0px rgba(255, 255, 255, 1),
    0px 0px 1696.1px 0px rgba(255, 255, 255, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.title {
  left: 18.99px;
  top: 0px;
  height: 53px;
  opacity: 1;
  font-size: 35px;
  font-weight: 400;
  letter-spacing: 0px;
  color: rgba(0, 0, 0, 1);
  text-align: left;
  vertical-align: top;
  letter-spacing: 4px;
}
.titleContainer {
  display: flex;
  justify-content: center;
  /* height: 53px; */
  overflow: hidden;
  margin-bottom: 30px;
}
.titleContainer img {
  width: 50px;
  margin-right: 20px;
}
.input {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.loginBtn {
  width: 100%;
  border-radius: 16px;
  margin-top: 10px;
}
.radioContainer {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
</style>